<template>
  <div>
    <h3>proxy-代理使用</h3>
    <!-- 1.跨域请求 -->
    <button @click="http">跨域请求</button><br>
    <!-- 2.proxy 简写方案--只能代理一台服务器 -->
    <button @click="proxyOne">proxy---one</button><br>
    <!-- 3.proxy 代理多台服务器 -->
    <button @click="proxyTwo">proxy--two</button><br>
    <button @click="proxyThree">proxy--three</button>

  </div>
</template>

<script>
import axios from 'axios'
export default {
  data() {
    return {};
  },

  methods: {
    //1.正常跨域请求
    http(){
        axios.get('http://localhost:3000/userlist')
        .then(res=>console.log(res))
        .catch(err=>console.log(err))
    },
    //2.proxy
    proxyOne(){
       axios.get('http://localhost:8080/userlist')
            .then(res=>console.log(res))
            .catch(err=>console.log(err))
    },
    //3.代理多台服务器
    proxyTwo(){
        axios.get('/api/userlist')
        .then(res=>console.log(res))
        .catch(err=>console.log(err))
    },
    proxyThree(){
      axios.get("/bpi/goodlist")
      .then(res=>console.log(res))
      .catch(err=>console.log(err))
    }
  },
};
</script>

<style scoped>
</style>
